<template>
  <div class="search-tool" :style="toolStyle">
    <div class="tool-top">
      <span>搜索工具</span>
      <img src="@/assets/dashboard/searchResult/tool-close.png" alt="" @click="$emit('close')">
    </div>
    <div class="search-type-check" v-if="!$store.state.searchResult.searchType || $store.state.searchResult.searchType==='综合'">
      <div class="field-name">搜索类别：</div>
      <div class="types">
        <div
          class="type-item"
          v-for="(item,index) in searchTypeArr"
          :key="index"
          :class="{active:item.active}"
          @click="changeTypeActive(index)"
        >{{ item.text }}</div>
      </div>
    </div>
    <div class="search-time-check">
      <div class="field-name">搜索时间：</div>
      <div class="times">
        <div class="time-item" :class="{active:timeType==='1'}" @click="timeType='1'">近一天</div>
        <div class="time-item" :class="{active:timeType==='2'}" @click="timeType='2'">近一周</div>
        <div class="time-item" :class="{active:timeType==='3'}" @click="timeType='3'">近一月</div>
        <div class="time-item" :class="{active:timeType==='4'}" @click="timeType='4'">近一年</div>
        <div class="time-item" :class="{active:timeType==='0'}" @click="timeType='0'">自定义</div>
      </div>
    </div>
    <div class="time-check" v-if="this.timeType==='0'">
      <el-date-picker
        v-model="timeRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        class="timeSelect"
        popper-class="timeSelectPopup"
      ></el-date-picker>
    </div>
    <div class="time-btns">
      <div class="reset-btn" @click="reset">重置</div>
      <div class="save-btn" @click="save">确定</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from 'moment'
export default {
  components: {
  },
  name: "",
  props: {
    nowStartTime: {
      type: String,
      default: '',
    },
    nowEndTime: {
      type: String,
      default: '',
    },
    nowTimeType: {
      type: String | Number,
      default: '0',
    },
    nowSearchTypes: {
      type: Array,
      default: [],
    },
    toolStyle: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      timeRange: ['',''],
      timeType: '0',
      searchTypeArr: [],
    }
  },
  computed: {
  },
  mounted() {
    this.timeType = this.nowTimeType || '0'
    this.timeRange = [this.nowStartTime || '',this.nowEndTime || '']
    this.searchTypeArr = this.$store.state.dashboard.searchTypes.filter((item)=>{
      return item.text !== '综合'
    }).map((item)=>{
      return {
        text: item.text,
        value: '',
        active: this.nowSearchTypes.indexOf(item.text)!==-1,
      }
    })
  },
  methods: {
    reset() {
      this.timeRange = ['','']
      this.timeType = '0'
    },
    save() {
      if(this.timeType === '1'){
        this.timeRange = [
          moment().subtract(1,'day').format('YYYY-MM-DD'),
          moment().format('YYYY-MM-DD')
        ]
      }
      else if(this.timeType === '2'){
        this.timeRange = [
          moment().subtract(1,'week').format('YYYY-MM-DD'),
          moment().format('YYYY-MM-DD')
        ]
      }
      else if(this.timeType === '3'){
        this.timeRange = [
          moment().subtract(1,'month').format('YYYY-MM-DD'),
          moment().format('YYYY-MM-DD')
        ]
      }
      else if(this.timeType === '4'){
        this.timeRange = [
          moment().subtract(1,'year').format('YYYY-MM-DD'),
          moment().format('YYYY-MM-DD')
        ]
      }
      let arr = this.searchTypeArr.filter((item)=>{
        return item.active
      }).map((item)=>{
        return item.text
      })
      this.$emit('save',this.timeType,this.timeRange,arr)
    },
    changeTypeActive(index){
      let len = this.searchTypeArr.filter((item)=>{
        return item.active
      }).length
      if(len===1 && this.searchTypeArr[index].active){
        this.$showMsg('搜索类别至少需要一条！','warning')
        return
      }
      this.searchTypeArr[index].active = !this.searchTypeArr[index].active
    },
  },
};
</script>
<style>
.timeSelectPopup {
  z-index: 100001 !important;
}
</style>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.search-tool {
  position: fixed;
  top: 0;
  left: 0;
  width: 384px;
  box-sizing: border-box;
  background-color: rgba(255,255,255,0.95);
  border-radius: 8px;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
  z-index: 100000;
  .tool-top {
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f3f6;
    span {
      font-size: 16px;
      color: @textColor;
    }
    img {
      width: 22px;
      height: 22px;
      cursor: pointer;
    }
  }
  .search-type-check {
    width: 100%;
    margin-top: 16px;
    box-sizing: border-box;
    padding: 0 16px;
    .field-name {
      width: 100%;
      color: rgba(0,0,0,0.66);
      font-size: 14px;
      line-height: 22px;
    }
    .types {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .type-item {
        width: 64px;
        height: 32px;
        box-sizing: border-box;
        margin-right: 8px;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        background-color: #ededed;
        color: @textColor;
        border: none;
        &.active {
          background-color: #fff2e8;
          color: @ntalkColor;
          border: 1px solid #ffbb96;
        }
        &:nth-child(5n) {
          margin-right: 0;
        }
      }
    }
  }
  .search-time-check {
    width: 100%;
    margin-top: 16px;
    box-sizing: border-box;
    padding: 0 16px;
    .field-name {
      width: 100%;
      color: rgba(0,0,0,0.66);
      font-size: 14px;
      line-height: 22px;
    }
    .times {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .time-item {
        width: 64px;
        height: 32px;
        box-sizing: border-box;
        margin-right: 8px;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        background-color: #ededed;
        color: @textColor;
        border: none;
        &.active {
          background-color: #fff2e8;
          color: @ntalkColor;
          border: 1px solid #ffbb96;
        }
        &:nth-child(5n) {
          margin-right: 0;
        }
      }
    }
  }


  .type-check {
    width: 100%;
    display: flex;
    align-items: center;
    .type-label {
      font-size: 14px;
      color: rgba(0,0,0,0.66);
    }
    /deep/ .el-radio {
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
    /deep/ .el-radio__label {
      padding-left: 6px;
    }
    /deep/ .el-radio__input.is-checked .el-radio__inner {
      border-color: @ntalkColor;
      background: @ntalkColor;
    }
    /deep/ .el-radio__input.is-checked+.el-radio__label {
      color: @ntalkColor;
    }
  }
  .time-check {
    width: 100%;
    height: 32px;
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    .timeSelect {
      width: 352px !important;
      height: 32px;
      line-height: 32px;
      margin-right: 16px;
      /deep/ .el-range__icon {
        margin-top: -8px;
      }
      /deep/ .el-range-separator {
        margin-top: -8px;
      }
      /deep/ .el-range__close-icon {
        margin-top: -8px;
      }
    }
    /deep/ .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
      border-color: @ntalkColor;
    }
  }
  .time-btns {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    .reset-btn {
      width: 60px;
      height: 32px;
      box-sizing: border-box;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 6px;
      color: @textColor;
      background-color: #ededed;
      margin-right: 8px;
    }
    .save-btn {
      width: 60px;
      height: 32px;
      box-sizing: border-box;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 6px;
      background-color: @ntalkColor;
      color: #fff;
    }
  }
}
</style>
